<%@ page import="java.util.*" pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='mdhbxq'/></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }
    </style>
</head>

<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <div class="layui-tab-content" style="height: 100%;">
        <div class="layui-tab-item layui-show">
            <div class="layui-container">
                <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
                    <form:form commandName="banner" method="post">

                        <form:hidden path="id"/>
                        <input type="hidden" name="_method" value="${_method}">


                        <div class="layui-form-item">
                            <label for="" class="layui-form-label"><span style="color: red;">*</span><fmt:message key='mdhbmc' /></label>
                            <div class="layui-input-inline" style="width: 70%">
                                <form:input class="layui-input" lay-verify="required" path="name"/>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mdhbtp' /></label>
                            <div class="layui-input-inline" style="width: 70%;">
                                <form:hidden path="image" lay-verify="required"/>
                                <a type="button" id="chooseImage" class="layui-btn layui-btn-sm layui-btn-normal">上传图片<fmt:message key='sctu' /></a>
                                <div id="imageBox">
                                    <c:if test="${not empty banner.image}">
                                        <img class="preview" src="${store_domain}/uploads/${banner.image}" style="width:120px;height:120px;margin-top:10px;">
                                    </c:if>
                                    <c:if test="${empty banner.image}">
                                        <img src="${web_domain}/resources/images/default.jpeg" style="width:120px;height:120px;margin-top:10px;">
                                    </c:if>
                                </div>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label for="" class="layui-form-label"><span style="color: red;">*</span><fmt:message key='pxz' /></label>
                            <div class="layui-input-inline" style="width: 70%">
                                <form:input class="layui-input" lay-verify="required|number" path="rank"/>
                            </div>
                        </div>

                        <div class="layui-form-item inner inner1" id="selectShop">
                            <label for="" class="layui-form-label"></label>
                            <div class="layui-input-inline" style="width: 70%">
                                <input type="button" class="layui-btn" id="select-goods" value="选择商品"/>
                                <form:hidden path="innerLinkId"/>
                            </div>
                        </div>

                        <div class="layui-form-item select-line">
                            <label for="" class="layui-form-label"><fmt:message key='yxzsp' /></label>
                            <div class="layui-input-block" style="line-height: 38px;">${banner.innerLinkName}</div>
                        </div>


                        <div class="layui-form-item confirm-line">
                            <label for="" class="layui-form-label"></label>
                            <div class="layui-input-inline">
                                <input type="button" style="display: none;" value="<fmt:message key='qd' />" id="submit" lay-filter="submit" lay-submit class="layui-btn">
                            </div>
                        </div>
                    </form:form>
                </div>
            </div>
        </div>

    </div>
</div>


<div style="display: none;">
    <form action="${web_domain}/upload/image" method="post" id="uploadImage" enctype="multipart/form-data">
        <input id="uploadImageFile" name="file" type="file" accept="image/*"/>
    </form>
</div>

<script>

    layui.use(['form', 'laydate'], function () {
        var form = layui.form;
        var laydate = layui.laydate;

        $("#chooseImage").click(function () {
            $("#uploadImageFile").click();
        });

        $("#uploadImageFile").change(function () {
            $("#uploadImage").ajaxSubmit({
                dataType: "JSON",
                success: function (result) {
                    if (result.status) {
                        $("#image").attr("value", result.path);
                        $("#imageBox").html("<img class='preview' src='${store_domain}/uploads/" + result.path + "' style='width:120px;height:120px;margin-top:10px;' />'");
                    }
                },
                error: function (result) {
                    console.log(result.responseText);
                }
            });
        });


        /**
         * 选择商品
         */
        $(document).on("click", "#select-goods", function () {
            layer.open({
                type: 2,
                title: "<fmt:message key='xzsp' />",
                content: "${web_domain}/merchant/banner/choose",
                area: ["90%", "90%"],
                btn: ["<fmt:message key='qr' />", "<fmt:message key='qx' />"],
                yes: function (index, layero) {

                    var checkbox = layero.find('iframe').contents().find("input[type=checkbox]:checked")[0];
                    $("#innerLinkId").val(checkbox.value);

                    var name = checkbox.getAttribute("data-name");
                    $("#innerLinkName").val(name);

                    $(".select-line").remove();

                    $(".confirm-line").before('<div class="layui-form-item select-line">\n' +
                            '                            <label for="" class="layui-form-label"><fmt:message key='yxzsp' /></label>\n' +
                            '                            <div class="layui-input-block" style="line-height: 38px;">' + name + '</div>\n' +
                            '                        </div>');
                    layer.close(index);
                }
            });
        });


        form.on('submit(submit)', function (data) {


            if($("#innerLinkId").val() == 0) {
                layer.msg("<fmt:message key='qxxzsp' />");
                return false;
            }

            $("#banner").ajaxSubmit({
                success: function (res) {
                    if (res.status) {
                        layer.alert("<fmt:message key='bccg' />", function () {
                            parent.location.reload();
                        });
                    } else {
                        layer.alert(res.message);
                    }
                }
            });
        });
    });
</script>
</body>
</fmt:bundle>
</html>